<template>
    <div class="progress_bar">
        <span>{{'0'+parseInt(this.value / 60)}}:{{ 10 > parseInt(this.value % 60) ? '0'+parseInt(this.value % 60) : parseInt(this.value % 60) }}</span>
        <div class="dragging">
            <input type="range" v-model="value" :min="0" :max="duration" 
            @input="inputing = true" 
            @change="inputing =false; $emit('update:currentTime', value);" />
            <div class="progress">
                <div class="bar" :style="{ width: `${(value / duration) * 100}%` }"></div>
            </div>
        </div>
        <span>{{'0'+parseInt(duration / 60)}}:{{ 10 > parseInt(duration % 60) ? '0'+parseInt(duration % 60) : parseInt(duration % 60)}}</span>
    </div>
</template>

<script>
export default {
    props: {
        currentSong: Object,
        playing: Boolean,
        currentTime: Number,
        duration: Number,
    },
    data: function () {
        return {
            inputing: false,
            value: this.currentTime,
        }
    },
    watch: {
        currentTime: function (n) {
            if(!this.inputing) {
                // console.log(this.value);
                this.value = n
            }
        }
    }
}
</script>

<style lang="less">
     .progress_bar {
         margin-top: 40px;
         padding: 0 15px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         span {
             font-size: 12px;
             color: white;
         }
        .dragging {
         position: relative;
         width: 76%;
         margin: 0 auto;
         height: 3px;
         input {
             position: absolute;
             width: 100%;
             height: 100%;
             margin: 0;
             left: 0;
             z-index: 1;
             opacity: 0;
         }
         .progress {
             width: 100%;
             height: 100%;
             background-color: rgba(255, 255, 255, 0.3);
             .bar {
                 width: 20%;
                 height: 100%;
                 background-color: rgba(255, 255, 255, 0.3);
                 position: relative;
                 &::before {
                   content: "";
                   position: absolute;
                   top: -0.5px;
                   right: -5px;
                   width: 5px;
                   height: 5px;
                   background-color: rgba(255, 255, 255, 0.781);
                   border-radius: 50%;
                 }
             }
         }
       }
     } 
</style>